﻿@using WikeSoft.Core.Extension
@model  WikeSoft.Core.AttachmentSet
@{
    string id = "k" + Guid.NewGuid().ToString().ToMD5();
    string filedname = Model.FiledName;
}

<div id="webupload_@id">
    <div id="uploader_@id" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist_@id" class="uploader-list"></div>
        <div class="btns">
            <div id="picker_@id">选择文件</div>
        </div>
    </div>
    <link href="~/Content/components/webuploader/webuploader.css" rel="stylesheet"/>

    <script src="/Scripts/jquery-1.10.2.js"></script>
   
    <script src="~/Content/components/webuploader/webuploader.min.js"></script>
   

   
    <script>


    var $ = jQuery,
        @(new MvcHtmlString("list_" + id)) = $('#thelist_@id'),
        state = 'pending',

        @id;

    // 初始化Web Uploader
    @id = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/content/components/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/Attachment/UploadFile',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker_@id',
        duplicate: true

    });

    //// 当有文件添加进来的时候
    @(new MvcHtmlString(id)).on('fileQueued', function(file) {

        @(new MvcHtmlString("list_" + id)).append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');
    });

    // 文件上传过程中创建进度条实时显示。
    @(new MvcHtmlString(id)).on('uploadProgress', function(file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css('width', percentage * 100 + '%');
    });

    @(new MvcHtmlString(id)).on('uploadSuccess', function(file, responseData) {
        $('#' + file.id).find('p.state').text('已上传');
        $('#' + file.id).remove();
        callBackData("#webupload_@id", responseData,"@filedname");
    });

    @(new MvcHtmlString(id)).on('uploadError', function(file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    @(new MvcHtmlString(id)).on('uploadComplete', function(file) {
    });

    @(new MvcHtmlString(id)).on('all', function(type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }


    });


    </script>

</div>